<template>
  <div class="main">

    <div class="navbar">
      <el-input
          v-model="search"
          style="width: 240px;margin-right: 10px"
          placeholder="search"
          size="large"
          :prefix-icon="Search"
      />
      <el-button type="warning"
          size="large"
          color="#FDA16A"
                 style="border-radius: 10px"
            >Filter</el-button>
    </div>

    <div class="sidebar">
      <div class="title">
        饭饭饭
      </div>
      <el-menu>
        <el-menu-item
            style="display: flex;justify-content: center">
          <el-icon><Dish /></el-icon>
          <span>order</span>
        </el-menu-item>
        <el-menu-item
            style="display: flex;justify-content: center">
          <el-icon><setting/></el-icon>
          <span>setting</span>
        </el-menu-item>
      </el-menu>
    </div>


    <div class="content">
      <router-view></router-view>
    </div>

  </div>
</template>

<script  setup lang="ts">
import {ref} from 'vue'
import { Search } from '@element-plus/icons-vue'
const search=ref('');


</script>

<style scoped>

.main{
  background: #F8F8F8;
  width: 100vw;
  height: 100vh;
}
.navbar{
  background: #FFFFFF;
  width: 100vw;
  height: 80px;
  position: fixed;
  z-index: 99;
  border: 1px solid #e0e0e0; /* 浅灰色边框 */
  display: flex;
  justify-content: center; /* 让子元素在水平方向上居中 */
  align-items: center; /* 垂直居中 */
}
.sidebar{
  background: #FFFFFF;
  width: 240px;
  height: 100vh;
  position: fixed;
  z-index: 100;
  border: 1px solid #e0e0e0; /* 浅灰色边框 */
}

.title{
  width: 100%;
  height: 100px;
  font-family: 'YourCustomFont', Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}
.content{
  background: #F8F8F8;
  width: calc(100% - 240px);
  height: calc(100% - 80px);
  position: absolute;
  left:240px;
  top: 80px;
}
</style>